<template>
 <div class="alert-box">
   <el-card style="height: 600px">
     <el-tabs type="border-card" @tab-click="handleClick" active-name="activeName">
       <el-tab-pane label="未读消息" name="未读消息">
         <table-message :table-data="tableData" :show-loading="showLoading"></table-message>
       </el-tab-pane>
       <el-tab-pane label="已读消息" name="已读消息">
         <TableMessage :table-data="tableData" :show-loading="showLoading"></TableMessage>
       </el-tab-pane>
     </el-tabs>
   </el-card>
 </div>
</template>

<script>
import TableMessage from "./tableMessage/tableMessage";
import TaskManager from "../../service/TaskManager";
export default {
  name: "message",
  components: {TableMessage},
  props:["visible"],
  data(){
    return{
      activeName:"未读消息",
      tableData:[],
      showLoading:true,
    }
  },
  watch:{
    visible(val){
      if(val){
        this.activeName="未读消息"
        this.handleClick({index:"0"})
      }
    }
  },
  mounted() {
    TaskManager.getMessage({id:window.localStorage.id,status:0}).then((res)=>{
      this.tableData=res.data
      this.showLoading=false
    })
  },
  methods:{
    handleClick(val){
      this.showLoading=true;
      TaskManager.getMessage({id:window.localStorage.id,status:Number(val.index)}).then((res)=>{
        let {status,data}=res
        console.log(res)
        if(status==200&&data!='ERROR!'){
          this.tableData=data;
          this.showLoading=false;
        }else{
          this.tableData=[];
          this.showLoading=false;
        }
      })
    }
  }

}
</script>

<style scoped>
/*.alert-box {*/
/*  z-index: 2000;*/
/*  width: 280px;*/
/*  position: absolute;*/
/*  !*bottom: 25px;*!*/
/*  !*right: 10px;*!*/
/*  margin: 0 auto;*/
/*  background: #fff;*/
/*}*/
</style>
